<template>
	<form class="kyc-identity-modal px-[25px] md:px-[35px] pt-4 pb-10" @submit.prevent="onEnter">
		<input type="submit" class="hidden" />
		<BaseTip textT="set.kyc.id.tip" />
		<IdentityUpload v-model:url="formValue.idCardFrontUrl" titleT="set.kyc.id.frontSide" />
		<IdentityUpload v-model:url="formValue.idCardBackUrl" titleT="set.kyc.id.backSide" />
		<BaseButton
			class="mt-10"
			type="primary"
			textT="action.submit"
			:disabled="!formValue.idCardFrontUrl || !formValue.idCardBackUrl"
			:loading="loading"
			@click="onEnter" />
	</form>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { setVerifyIdentity } from '@/api/profile'
import { BaseButton, BaseTip } from '@/components/base'
import { useRequest } from '@/hooks'
import { useProfileStore } from '@/store'
import { t } from '@/utils'
import { IdentityUpload } from '../components'

const profileStore = useProfileStore()
const formValue = reactive({
	idCardFrontUrl: '',
	idCardBackUrl: ''
})

const { run, loading } = useRequest(setVerifyIdentity, {
	showError: true,
	showSuccess: t('tip.submitSuccess'),
	onSuccess: () => {
		profileStore.getUserInfo()
		profileStore.show.identity = false
	}
})
const onSubmit = async () => {
	await run({ ...formValue })
}
const onEnter = async () => {
	await onSubmit()
}
</script>
